﻿@{
    ViewBag.Title = "index";
    Layout = "~/Views/Shared/_Layout2.cshtml";
}

@section styles {
    <style>
       section 
       {
         margin-left:10px;    
       } 
       
       #nameContainer 
       {
          width:400px;
          height:400px;   
          margin-top:40px;
       }
    </style>
}

<div>
   <section>
     <div id='nameContainer' ></div>
     <div>
        <a href='javascript:void(0)' class='roundbutton' id='btnStart' style='width:50px;height:50px;'>START</a>
        <a href='javascript:void(0)' id='btnStop'>STOP</a>
     </div>
   </section>
   <section>
      <div>
      </div>
   </section>
</div>

@section scripts {
  <script src="Scripts/src/appLottery.js" type="text/javascript"></script>
  <script>
      $(document).ready(function () {
          var alot = new window.AppLot({
              $txtDom: $('#nameContainer'),
              resPath: 'Content/data/lottery.json'
          });

          $('#btnStart').click(function () {
              alot.start();
          });

          $('#btnStop').click(function () {
              alot.stop(true);
          });

          //          var iflag = 0;
          //          var intervalFlag;
          //          var resourse;
          //          $('#btnStart').click(function () {

          //              $.getJSON('Content/data/lottery.json', function (res) {

          //                  if(!resourse)
          //                      resourse = res.data;

          //                  var names = _.where(resourse, { "Used": "0" });
          //                  var _names = _.clone(names);
          //                  var _len = _names.length;
          //                  intervalFlag = setInterval(function () {
          //                      var i = iflag % _len;
          //                      $('#nameContainer').html(_names[i].Name);
          //                      $('#nameContainer').data('id', _names[i].Id)
          //                      iflag++;
          //                  }, 500);
          //              });
          //          });

          //          $('#btnStop').click(function () {
          //              var _id = $('#nameContainer').data('id');
          //              var obj = _.find(resourse, function (o) { return o.Id == _id; });
          //              obj.Used = "1";
          //              clearInterval(intervalFlag);
          //          });



      });
  </script>
}
